<!--

    Copyright © 2016-2025 The Thingsboard Authors

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<section class="tb-ws-client-title-toolbar" style="padding: 8px 16px 8px 16px;">
  <section class="tb-ws-client-title-toolbar">
    <span class="tb-ws-client-title" style="margin-right: 8px" translate>ws-client.connections.messages</span>
    <tb-toggle-select appearance="stroked"
      (ngModelChange)="onMessageFilterChange($event)"
      [ngModelOptions]="{standalone: true}"
      [options]="messagesTypeFilters"
      [(ngModel)]="selectedOption">
    </tb-toggle-select>
  </section>
  <section class="flex flex-row gap-2">
    <tb-message-filter-config [ngModel]="filterConfig"
      (ngModelChange)="filterChanged($event)"
      [connectionChanged]="connection"
      propagatedFilter="false">
    </tb-message-filter-config>
    <button mat-stroked-button color="primary" style="white-space: nowrap;"
      (click)="clearHistory()">
      <span translate>ws-client.connections.clear-connection-history</span>
    </button>
  </section>
</section>

<section class="tb-messages-container" [class.limit-height]="isLtLg | async">
  <tb-messages style="overflow: auto"></tb-messages>
</section>

<div [formGroup]="messangerFormGroup" class="mat-padding flex flex-col" style="background: #fff; border-radius: 4px;">
  <section class="flex flex-row flex-nowrap items-center gap-4 lt-xl:flex-wrap"
    [class.wrap]="isLtLg | async">
    <mat-form-field class="flex flex-1" [class.topic-mat-form-field]="isLtLg | async"
                    style="min-width: 200px !important; width: 100%" hideRequiredMarker>
      <mat-label translate>mqtt-client-session.topic</mat-label>
      <input matInput formControlName="topic" [matAutocomplete]="auto">
      <mat-autocomplete #auto="matAutocomplete">
        @for (option of filteredTopics | async; track option) {
          <mat-option [value]="option">{{option}}</mat-option>
        }
      </mat-autocomplete>
      @if (messangerFormGroup.get('topic').hasError('required')) {
        <mat-error>
          {{ 'mqtt-client-session.topic-name-required' | translate }}
        </mat-error>
      }
      @if (messangerFormGroup.get('topic').hasError('invalidTopic')) {
        <mat-error>
          {{ 'mqtt-client-session.topic-name-invalid' | translate }}
        </mat-error>
      }
      <tb-color-input asBoxInput matSuffix formControlName="color" style="margin-right: 8px">
      </tb-color-input>
    </mat-form-field>
    <tb-qos-select formControlName="qos" class="flex max-w-20% lt-xl:max-w-20%">
    </tb-qos-select>
    <mat-form-field class="flex max-w-20% lt-xl:max-w-[100px]">
      <mat-label translate>value.format</mat-label>
      <mat-select formControlName="payloadFormat">
        @for (valueType of payloadFormats; track valueType) {
          <mat-option [value]="valueType.value">
            {{ valueType.name | translate }}
          </mat-option>
        }
      </mat-select>
    </mat-form-field>
    <section class="retain-container margin-bottom">
      <mat-slide-toggle formControlName="retain">
        {{ 'ws-client.last-will.retain' | translate }}
      </mat-slide-toggle>
    </section>
    <button mat-stroked-button color="primary" class="btn-properties margin-bottom"
      [matTooltip]="'ws-client.connections.show-meta' | translate"
      [disabled]="mqttVersion !== 5"
      (click)="messagePropertiesDialog()"
      aria-label="Show message meta data">
      <span>{{ 'ws-client.connections.properties' | translate }}</span>
    </button>
  </section>
  <section class="tb-message-input-container">
    <tb-ws-json-object-edit
      formControlName="payload"
      [jsonFormatSelected]="jsonFormatSelected"
      [label]="'value.json-value-invalid' | translate"
      [jsonRequired]="false"
      (isJsonValid)="onJsonValidation($event)"
      [fillHeight]="false">
    </tb-ws-json-object-edit>
    <button mat-icon-button color="primary" class="send-message-btn" style="width: 40px; height: 40px; padding: 8px;"
      (click)="publishMessage()"
      [matTooltip]="'ws-client.messages.publish-message' | translate"
      [disabled]="(!messangerFormGroup.get('topic')?.value?.length && !applyTopicAlias) || !isConnected || !isPayloadValid || messangerFormGroup?.invalid">
      <mat-icon>send</mat-icon>
    </button>
  </section>
</div>





